<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            PCS运行状态评估
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg :viewbox="'0 0 600 500'" :svgstyle="'width: 400px'" :textname="'PCS运行状态估计'"></cn-svg>
      <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          ref="cell-input"
          placeholder="请输入晶体模块编号："
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="init">查询</button>
      </div>
      <!-- 使用封装的cnsearch组件 -->
      <!-- <cn-search :placeholder="'请输入晶体模块编号:'" @cnclick="init" ></cn-search> -->
    </div>
    <div class="main-content">
      <back-1 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">结温估算</div>
          <div style="font-size: 16px">Junction Temperature Estimation</div>
        </div>
        <roll-chart :option="jwdata2" :step1="10" :step2="2" :intv="2" />
      </back-1>
      <gap style="width: 15%" />
      <back-2 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">晶体管功耗估算</div>
          <div style="font-size: 16px">
            Transistor Power Consumption Estimation
          </div>
        </div>
        <roll-chart :option="jwdata1" :step1="10" :step2="2" :intv="2" />
      </back-2>
      <gap style="width: 15%" />
      <back-3 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">高温预警等级</div>
          <div style="font-size: 16px">High Temperature Warning Level</div>
        </div>
        <roll-chart :option="htdata" :step1="10" :step2="2" :intv="2" />
        <!-- <roll-chart -->
      </back-3>
    </div>
  </div>
</template>

<script>
import { generateXAxis, generateYAxis } from "../utils/chart_tools";
import Back1 from "./Back1.vue";
import Back2 from "./Back2.vue";
import Back3 from "./Back3.vue";
import Gap from "./Gap.vue";
import RollChart from "./RollChart.vue";
import { mapGetters } from "vuex";
import cnSvg from "./cn-svg.vue";
// import cnSearch from "./cn-search.vue";
export default {
  components: { Back1, Back2, Back3, Gap, RollChart, cnSvg},
  data() {
    return {
      htdata: {},
      jwdata1: {},
      jwdata2: {},
    };
  },
  computed: {
    ...mapGetters(["pcs_data"]),
  },
  watch: {
    // eslint-disable-next-line
    pcs_data(val) {
      this.init();
    },
  },
  methods: {
    init() {
     
      try {
        let cell = this.$refs["cell-input"].value;
        // notify.notify(cell, 1)
        let data;
        if (cell === "") {
          data = this.pcs_data[0];
        } else {
          try {
            cell = parseInt(cell) - 1;
            if(cell < 0) {
              cell = 0
            }
          } catch {
            // notify.notify("请输入正确的电池串编号", 1);
            cell = 0;
          }
          data = this.pcs_data[cell % this.pcs_data.length];
        }
        this.process_ht(data['高温预警']);
        this.process_gw1(data['功耗']);
        this.process_jw(data['结温']);
      } catch (e) {
        console.log(e);
      } 
    },
    process_gw1(d) {
      
      let data = d;

      let opt = {
        color:['#66d0e3'],
        grid: {
          left: "17%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "IGBT模块功耗",
            type: "bar",
            data: data,
            yAxisIndex: 0,
            
          },
        ],
        // 传入纵坐标名称与单位
        yAxis: generateYAxis({ label: '功率'+' / ',  unit: "W" }),
      };
      this.jwdata1 = opt;
    },
    process_jw(d) {
     
      let data = d;

     
      let opt = {
        color:['#66d0e3'],
        grid: {
          left: "17%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "IGBT模块结温",
            type: "bar",
            data: data,
            yAxisIndex: 0,
          },
        ],
        // 传入纵坐标名称与单位
        yAxis: generateYAxis({ label: '温度'+' / ', unit: "℃" }),
      };
      this.jwdata2 = opt;
    },
    process_ht(d) {
      // d = Array(200).fill(1);
      let data = d;
     
      let opt = {
        color:['#66d0e3'],
        grid: {
          left: "17%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "IGBT模块故障预警",
            type: "line",
            data: data,
            showSymbol: false,
          },
        ],
        // nolabel为真,不显示纵坐标名称,且纵坐标显示单位
        yAxis: generateYAxis({ type: "category", unit: '级', nolabel: true }),
      };
      this.htdata = opt;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>